<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加银行卡</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/static/icon_font/iconfont.css">
</head>
<style>
    body {
        background-color: #eff3f6;
        font-size: 18px;
    }

    header {
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;
        box-sizing: border-box;
    }

    header h3 {
        margin: 0;
        position: absolute;
        left: 50%;
        top: 2%;
        transform: translateX(-50%);
    }

    .white {
        font-size: 24px;
    }

    .big_group {
        border-bottom: 1px solid #eff3f6;
        padding-bottom: 10px;
    }

    .big_group img {
        width: 60px;
        height: 60px;
    }

    .big_group text {
        margin-left: 20px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;

    }

    .group img {
        width: 50px;
        height: 50px;
    }

    .gray {
        color: gray;
    }

    input {
        border: none;
        text-align: right;
        outline: none;
    }

    .btn-info.active {
        background-color: transparent;
        border-color: transparent;
        color: #000;
    }

    .btn.active {
        box-shadow: none;

    }

    .btn-info {
        background-color: transparent;
        border-color: transparent;
    }

    .btn-lg {
        padding: 0;
    }

    .red {
        background-color: #FF3366;
        color: #fff;
        border-radius: 20px;
        margin-top: 40px;
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .form-control {
        width: 71px;
        padding: 0;
    }

    .form-group {
        margin-bottom: 0;
    }

    .aaa select {
        border: none;
        outline: none;
        border: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        direction: rtl;
        text-align: center;
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll rightright center transparent;
    }

    .aaa select::-ms-expand {
        display: none;
    }

    select option {
        text-align: center;
    }

    .add {
        margin-left: 15px;
        color: #fff !important;
        background-color: #50d2c2;
        border-radius: 30px;
        height: 30px;
        padding: 0 20px;
        font-size: 14px;
        border: none;
    }
</style>

<body>
<div>
    <header>
        <i class="iconfont white  icon-zuojiantou" id="skip"></i>
        <h3>添加银行卡</h3>
    </header>
    <div class="group" style="box-sizing: border-box;">
        <text class="gray">基本信息</text>
    </div>
    <div class="group aaa">
        <text class="gray">姓名</text>
        <text>{$res.cm_name}</text>
    </div>
    <div class="group aaa">
        <text class="gray">录入来源区别</text>
        <text>{$res.cm_type}</text>
    </div>
    <div class="group aaa">
        <text class="gray">公司</text>
        <text>{$res.cm_company}</text>
    </div>

    <div class="group" style="margin-bottom: 20px; display: block;">
        <div class="gray"><span style="color:#FF3366">*</span>最擅长商圈</div>
        <form class="form-inline">
            <div data-toggle="distpicker" style="display: flex; justify-content: space-between;margin-top:15px;">
                <div class="form-group" style="margin-right:15px;">
                    <label class="sr-only" for="province1">Province</label>
                    <select class="form-control" id="province1"></select>
                </div>
                <div class="form-group" style="margin-right:15px;">
                    <label class="sr-only" for="city1">City</label>
                    <select class="form-control" id="city1"></select>
                </div>
                <div class="form-group" style="margin-right:15px;">
                    <label class="sr-only" for="district1">District</label>
                    <select class="form-control" id="district1"></select>
                </div>
                <div class="form-group" style="margin-right:15px;">
                    <select class="form-control" id="shangquan"></select>
                </div>
            </div>
        </form>
    </div>
    <div class="group">
        <text class="gray">银行信息录入</text>

    </div>
    <div class="group">
        <text class="gray"><span style="color:#FF3366">*</span>开户银行</text>
        <input placeholder="请输入开户银行" id="yinhang"></input>
    </div>
    <div class="group">
        <text class="gray"><span style="color:#FF3366">*</span>开户支行</text>
        <input placeholder="请输入开户支行" id="zhihang"></input>
    </div>
    <div class="group">
        <text class="gray"><span style="color:#FF3366">*</span>开户城市</text>
        <input placeholder="请输入开户城市" id="chengshi"></input>
    </div>
    <div class="group">
        <text class="gray"><span style="color:#FF3366">*</span>开户人</text>
        <input placeholder="请输入开户人姓名" id="name"></input>
    </div>
    <div class="group">
        <text class="gray"><span style="color:#FF3366">*</span>开户账号</text>
        <input placeholder="请输入开户账号" id="kahao"></input>
    </div>
    <div class="group">
        <text class="gray">身份证号</text>
        <input placeholder="请输入身份证号" id="card"></input>
    </div>
</div>
<button type="button" class="red" id="save">确认保存</button>

</body>
<script src="__PUBLIC__/static/js/distpicker.data.js"></script>
<script src="__PUBLIC__/static/js/distpicker.js"></script>
<script src="__PUBLIC__/static/js/main.js"></script>
<script>
    $(function () {
        $('#skip').click(function(){
            window.location.href = '/wx/user/center'
        })
        var e;
        $('#district1').change(function () {
            var options = $('#district1 option:selected')
            $('#shangquan').empty()
            e = options[0].innerText // 区名
            let a = options[0].outerHTML
            let b = a.split('-', 2)
            let c = b[1].split('"', 2)
            d = c[1]
            $.ajax({
                url: '__PUBLIC__/wx/api/serch_business_circle',
                data: {
                    bc_area_id: d
                },
                type: 'POST',
                success: (res => {
                    let arr = JSON.parse(res)
                    if (arr.data.length == 0) {
                        $("#shangquan").append(`<option>暂无信息</option>`)
                    } else {
                        arr.data.forEach((item, i) => {
                            console.log(item)
                            $("#shangquan").append(`<option value="${item.bc_id}">${item.bc_name}</option>`)
                        })
                    }

                })
            })
            console.log(options)
        })
        $('#save').click(function () {
            let cm_bank_name = $('#yinhang').val()
            let cm_bank_address = $('#zhihang').val()
            let cm_bank_city = $('#chengshi').val()
            let cm_true_name = $('#name').val()
            let cm_bank_id = $('#kahao').val()
            let cm_user_id = $('#card').val()
            let bc_id = $('#shangquan option:selected').val()
            console.log(bc_id)
            $.ajax({
                url: '__PUBLIC__/wx/channel/add_bank',
                data: {
                    cm_bank_name,
                    cm_bank_address,
                    cm_bank_city,
                    cm_bank_id,
                    cm_user_id,
                    cm_true_name,
                    bc_id
                },
                type: 'post',
                success: (res) => {
                    console.log(res)
                    let arr = JSON.parse(res)
                    alert(arr.msg)
                }
            })
        })
    })
</script>

</html>